<!-- 弹框 -->
<template>
 <teleport to="#modal">
  <div class="modal d-block" tabindex="-1" v-if="visible">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">{{ title }}</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" @click="handerClose"></button>
        </div>
        <div class="modal-body">
          <slot><p>Modal body text goes here.</p></slot>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" @click="handerClose">{{ cancelText }}</button>
          <button type="button" class="btn btn-primary" @click="handerOk">{{ okText }}</button>
        </div>
      </div>
    </div>
  </div>
 </teleport>  
</template>

<script lang='ts'>
import { defineComponent, PropType, computed } from "vue";
import useDomCreate from '@/hooks/useDomCreate'
export default defineComponent({
  name: "modal",
  props: {
      visible: {
          type: Boolean,
          default: false,
          require: true
      },

      title: {
          type: String,
          default: '新建',
      },

      okText: {
          type: String,
          default: '确认',
      },

      cancelText: {
          type: String,
          default: '关闭',
      },

  },
  emits: ['modal-on-close', 'modal-on-confirm'],
  components: {},

  setup(props, context) {
      useDomCreate('modal');
      const handerClose = () => {
          context.emit("modal-on-close")
      }

      const handerOk = () => {
          context.emit("modal-on-confirm")
      }

      return {
          handerClose,
          handerOk
      }
  },
});
</script>
<style lang='scss' scoped>
</style>